<%@ page import="cn.tedu.entity.User" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/28
  Time: 16:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>UserServlet的测试</title>
    <style>
        .xian {display: block;}
        .yin {display:none;}
        #change{
            position: absolute;
            margin:0 0 0 500px ;
            padding:40px 0 0 100px;
            width: 300px;
            height: 260px;
            text-align: center;
            background-color: hotpink;
            border-radius: 30px;

        }
        #change input{
            position: relative;
            display: block;
            border-radius: 30px;
            height: 50px;
            line-height: 50px;
            marign:0 0 0 30px;
            width: 200px;
        }

        #close{
            /*border:1px solid red ;*/
            display: block;
            position: absolute;
            margin:-230px 0 0 260px ;
            cursor: pointer;
        }


    </style>
    <script>

        window.onload = function (){
            var buts = document.getElementsByName("buts");//获取到所有的button
            console.log(buts.length);
            for (var i = 0; i < buts.length; i++) {
                //     console.log(buts[i]);
                // console.log(buts[i].getAttribute("value"));
                buts[i].addEventListener("click",function (){
                    // console.log(this.getAttribute("value"));//获取到了当前一条数据的ID
                    location.href="del.user?value="+this.getAttribute("value");
                },false);
            }



            var chas = document.getElementsByName("chas");//获取到所有的button
            // console.log(chas.length);
            for (var i = 0; i < chas.length; i++) {
                chas[i].addEventListener("click",function (){
                    var value = this.getAttribute("value");//获取到了当前一条数据的ID
                    document.getElementById("change").setAttribute("class","xian");
                    document.getElementById("ipt1").setAttribute("value",value);
                },false);
            }

            document.getElementById("close").addEventListener("click",function (){
                document.getElementById("change").setAttribute("class","yin");
            },false);


        }


    </script>
</head>
<body>
    <div class="yin" id="change">
        <form action="change.user" id="form1">
            <br><input type="text" name="changename" placeholder="请输入要修改的用户名" >
            <br><input type="password" name="changepwd" placeholder="请输入要修改密码">
            <br><input type="hidden" id="ipt1" name="changeid">
            <br><input type="submit" value="修改">
            <span id="close" >X</span>
        </form>
    </div>

    <h1>测试user的查询</h1>

    <%--table>(tr>th*3)+tr>td*3--%>
    <table border="1">
        <tr>
            <th>用户ID</th>
            <th>用户名</th>
            <th>用户密码</th>
        </tr>
        <%--从servlet获取数据并遍历到页面当中来.--%>
        <%
            if(request.getAttribute("users")!=null){
            List<User> list = (List<User>)request.getAttribute("users");
            //从后台获取的数据只是Object类型的对象.不管是什么数据,都需要强转.
            /**Java代码与HTML代码结合,实现集合的遍历.**/
            for (int i = 0; i < list.size(); i++) {
                User user = list.get(i);
        %>
                <tr>
                    <td><%=user.getId()%></td>
                    <td><%=user.getName()%></td>
                    <td><%=user.getPassword()%></td>
                    <td><button name="chas" value="<%=user.getId()%>">修改</button></td>
                    <td><button name="buts" value="<%=user.getId()%>" >删除</button></td>
                </tr>
           <% }
           }
           %>
    </table>

    <h1>测试单个User实例的获取</h1>

    <form action="query.user">
        <input type="text" placeholder="请输入您的用户名" name="username" >
        <input type="submit" value="确定">
    </form>
    <%
        if (request.getAttribute("user")!=null){
        User user = (User) request.getAttribute("user");
    %>
    <div>
        <span><%=user.getId()%></span>
        <span><%=user.getName()%></span>
        <span><%=user.getPassword()%></span>
    </div>
    <%}%>

    <h1>测试tb_user的添加</h1>
    <%--先定义请求的路径 add.user--%>
    <form action="add.user" >
        <input type="text" name="username"><br>
        <input type="password" name="userpwd"><br>
        <input type="submit" value="添加用户"><br>
    </form>

    <%
        if(request.getAttribute("state")!=null){
            String str = (String) request.getAttribute("state");
    %>
    <span style="color:red" ><%=str%></span>
    <%
        }%>
    <h1>测试tb_user的修改</h1>
    <h1>测试tb_user的删除</h1>
</body>
</html>
